<template>
	<view class="order-detail footer-padding" :class="{'padding-top-122':info.markWord}">
		<view class="header-fixed-box" v-if="info.markWord">
			<u-notice-bar @close="info.markWord=false" mode="horizontal" :list="[info.markWord]" :close-icon="true" color="#1F1F1F" volume-color="#2878ff" bg-color="#EBF3FF" padding="24rpx 24rpx"></u-notice-bar>
		</view>
		<view class="text-c color-fff">
			<view class="font-s-12">申请金额 (元)</view>
			<view class="order-money">{{info.applyAmount}}</view>
			<view class="font-s-12 flex-center mar-t-11">
				<view class="color-fff-072">借款期限：{{$common.selectDictLabel(dayOptions,info.applyTotalDay) || '-'}}</view>
				<u-line color="rgba(255,255,255,0.24)" direction="col" length="24" margin="0 48rpx"></u-line>
				<view class="color-fff-072">还款周期：{{$common.selectDictLabel(termOptions,info.applyTotalTerm) || '-'}}</view>
			</view>
		</view>
		<view class="order-no flex-between-center">
			<view class="fw-b color-fff">订单编号：{{info.orderNo || '-'}}</view>
			<static-image @click="$common.setClipboardData(info.orderNo)" src="/pagesA/static/img/order/icon-copy-1.png" width="28" height="28"></static-image>
		</view>
		<view class="reject-box" v-if="info.approveStatus===3">
			<view class="flex-align-center">
				<static-image src="/pagesA/static/img/order/icon-notice.png" width="40" height="40" margin-right="16"></static-image>
				<view class="font-s-16 fw-b">拒绝原因</view>
			</view>
			<view class="color-666 line-height-44 mar-t-15">{{info.approveRemark || '暂无拒绝原因'}}</view>
		</view>
		<view class="order-progress">
			<view class="font-s-16 fw-b">审核进度</view>
			<u-read-more ref="uReadMore" show-height="160" :font-size="24" :toggle="true" close-text="展开全部" text-indent="0" :shadow-style="{backgroundImage: 'linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 80%)',paddingTop: '100rpx',marginTop: '-100rpx'}">
				<view class="step-box">
					<view class="step-item" v-for="(item,index) in orderProcess" :key="index">
						<view class="step-line"></view>
						<view class="flex-1" style="padding-top: 2rpx;">
							<view class="flex-between-center">
								<view class="fw-b" :class="{'color-666':index>0}">{{item.handleTitle || '-'}}</view>
								<view class="font-s-12 color-999">{{item.handleTime || '-'}}</view>
							</view>
							<view class="step-content">备注信息：{{item.handleContent || '-'}}</view>
						</view>
					</view>
				</view>
			</u-read-more>
		</view>
		<view class="other-info">
			<view class="flex-between-center">
				<view class="flex-align-center">
					<static-image src="/pagesA/static/img/applyFor/icon-hkjh.png" width="48" height="48" margin-right="16"></static-image>
					<view class="fw-b">申请信息</view>
					<view class="status-tag">已完成</view>
				</view>
				<view class="flex-align-center" @click="$common.navigator('/pagesA/order/info?orderId='+info.id)">
					<view class="color-999">去查看</view>
					<static-image src="/static/img/common/arrow-right.png" width="24" height="24" margin-left="4"></static-image>
				</view>
			</view>
			<view class="flex-between-center">
				<view class="flex-align-center">
					<static-image src="/pagesA/static/img/applyFor/icon-skzh.png" width="48" height="48" margin-right="16"></static-image>
					<view class="fw-b">银行绑卡</view>
					<view class="status-tag">已完成</view>
				</view>
				<view class="flex-align-center" @click="$common.navigator('/pagesA/applyFor/bankCard')">
					<view class="color-999">去查看</view>
					<static-image src="/static/img/common/arrow-right.png" width="24" height="24" margin-left="4"></static-image>
				</view>
			</view>
			<view class="flex-between-center">
				<view class="flex-align-center">
					<static-image src="/pagesA/static/img/applyFor/icon-wszl.png" width="48" height="48" margin-right="16"></static-image>
					<view class="fw-b">完善资料</view>
					<view class="status-tag">已完成</view>
				</view>
				<view class="flex-align-center" @click="$common.navigator('/pagesA/applyFor/improveInfo?disabled=1')">
					<view class="color-999">去查看</view>
					<static-image src="/static/img/common/arrow-right.png" width="24" height="24" margin-left="4"></static-image>
				</view>
			</view>
			<view class="flex-between-center" v-if="info.approveStatus==2 || info.signStatus==2">
				<view class="flex-align-center">
					<static-image src="/pagesA/static/img/order/icon-jkxy.png" width="48" height="48" margin-right="16"></static-image>
					<view class="fw-b">借款协议</view>
					<view class="status-tag wait-tag" v-if="info.approveStatus==2 && info.signStatus!=2">待签约</view>
					<view class="status-tag" v-else>已完成</view>
				</view>
				<view class="flex-align-center" @click="handleSign()" v-if="info.signStatus!=2">
					<view class="color-999">去签约</view>
					<static-image src="/static/img/common/arrow-right.png" width="24" height="24" margin-left="4"></static-image>
				</view>
			</view>
		</view>
		<view class="footer-btn footer-btn-box" v-if="(info.approveStatus==2 && info.signStatus!=2) || info.isFund">
			<view class="btn-primary" @click="handleSign()" v-if="info.approveStatus==2 && info.signStatus!=2">立即签约</view>
			<view class="btn-primary" @click="$common.navigator('/pagesA/bill/index?orderId='+info.id)" v-if="info.isFund">查看账单</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				termOptions: [],
				dayOptions: [],
				info: {},
				orderProcess: [],
			}
		},
		onLoad(e) {
			this.orderId = e.orderId
			this.getDicts()
			if(e.sign){
				this.getContractStatus()
			}else{
				uni.showLoading({ mask: true })
				this.getDetail()
			}
		},
		methods: {
			getDicts(){
				this.$request({
					url: '/system/dict/data/type/repayment_term',
					method: 'get'
				}).then(res => {
					this.termOptions = res.data;
				})
				this.$request({
					url: '/system/dict/data/type/loan_days',
					method: 'get'
				}).then(res => {
					this.dayOptions = res.data;
				})
			},
			getDetail(){
				this.$request({
					url: '/orderInfo/getDetail',
					method: 'get',
					data: { id: this.orderId }
				}).then(response => {
					this.info = response.data
				})
				this.$request({
					url: '/orderInfo/getOrderInfoProcess',
					method: 'get',
					data: { id: this.orderId }
				}).then(response => {
					this.orderProcess = response.data
					this.$nextTick(() => {
						this.$refs.uReadMore.init();
					})
				})
			},
			getContractStatus(){
				uni.showLoading({ mask: true })
				this.$request({
					url: '/orderInfo/selectContractStatus',
					method: 'get',
					data: { id: this.orderId }
				}).then(response => {
					this.getDetail()
				})
			},
			handleSign(){
				uni.showLoading({
					mask:true
				})
				this.$request({
					url: '/orderInfo/creditAuthenticationContract',
					method: 'post',
					data:{id: this.info.id}
				}).then(res => {
					this.getDetail()
					this.$u.toast('签约成功')
					// window.location.href = res.data.signUrl
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.order-detail {
		background-image: url('../static/img/order/header-bg.png');
		background-size: 100% 448rpx;
		background-repeat: no-repeat;
		padding: 40rpx 24rpx 24rpx;
		&.padding-top-122{
			padding-top: 122rpx;
			background-position: 0 82rpx;
		}
		.order-money{
			font-weight: bold;
			font-size: 64rpx;
			margin-top: 12rpx;
		}
		.order-no{
			padding: 72rpx 24rpx 32rpx;
		}
		.order-progress{
			background: #FFFFFF;
			border-radius: 24rpx;
			padding: 28rpx 24rpx 0;
			.step-box{
				margin-top: 32rpx;
				.step-item{
					display: flex;
					padding-bottom: 48rpx;
					position: relative;
					color: #1f1f1f;
					.step-line{
						width: 38rpx;
						height: 38rpx;
						border: 10rpx solid #E0EDFF;
						background-color: #3385FF;
						border-radius: 50%;
						margin-right: 24rpx;
						flex-shrink: 0;
					}
					.step-content{
						color: #666;
						line-height: 40rpx;
						font-size: 24rpx;
						margin-top: 6rpx;
					}
					&:not(:last-child):before{
						content: '';
						width: 2rpx;
						height: calc(100% - 54rpx);
						background-color: rgba(51,133,255,0.12);
						position: absolute;
						left: 18rpx;
						top: 46rpx;
					}
				}
			}
		}
		.other-info{
			>view{
				height: 124rpx;
				background: #FFFFFF;
				border-radius: 24rpx;
				margin-top: 24rpx;
				padding: 0 24rpx;
				.status-tag{
					width: 80rpx;
					height: 32rpx;
					line-height: 32rpx;
					background: rgba(24,204,132,0.08);
					border-radius: 4rpx;
					font-size: 24rpx;
					color: #18CC84;
					text-align: center;
					margin-left: 8rpx;
					&.wait-tag{
						background: rgba(255,133,51,0.08);
						color: #FF8533;
					}
				}
			}
		}
		.footer-btn-box{
			display: flex;
			align-items: center;
			justify-content: flex-end;
			>view{
				display: flex;
				align-items: center;
				justify-content: center;
				min-width: 190rpx;
				padding: 0 16rpx;
				height: 76rpx;
				background: #F5F7FA;
				border-radius: 16rpx;
				font-weight: bold;
				margin-left: 24rpx;
				border-radius: 40rpx;
				&:first-child{
					margin-left: 0;
				}
				&.btn-primary{
					background: #1F78FF;
					color: #FFFFFF;
					border: 0;
				}
				&.btn-warning{
					background-color: #FE781E;
					color: #FFFFFF;
					border: 0;
				}
				&.btn-warning-plain{
					color: #FE781E;
					background-color: #FFFFFF;
					border: 2rpx solid #FE781E;
				}
			}
		}
	}
</style>
